<template>
  <div id="app">
    <!-- <home @searchClick="homeClick"></home> -->
    <tab-bar v-show="!flag" @changeIndex="tabBarClick"></tab-bar>
    <component :is="index==0 && (flag ? searchpage : home)"
    @searClick="homeClick"
    @gohome="backhome"
    ></component>
    <component :is="index==1&&categort"></component>
    <component :is="index==2&&shoppingcart"></component>
    <component :is="index==3&&profile"></component>
    <!-- <search-page ></search-page> -->
  </div>
</template>

<script>
import TabBar from './components/common/tab_bar/TabBar.vue'
import Home from "./views/Home.vue"
import SearchPage from './views/SearchPage.vue'
import Categort from './views/Category.vue'
import Shoppingcart from './views/ShoppingCart.vue'
import Profile from './views/Profile.vue'

export default {
  name: 'App',
  components: {
    // Home,
    TabBar,
    // SearchPage
  },
  data() {
    return {
      index:0,
      flag:false,
      home:Home,
      searchpage:SearchPage,
      categort:Categort,
      shoppingcart:Shoppingcart,
      profile:Profile
    }
  },
  methods: {
    homeClick(r){
      this.flag=r
      console.log(r);
    },
    tabBarClick(i){
      this.index=i
    },
    backhome(){
      this.flag=false
    }
  },
}
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
</style>
